<!DOCTYPE html>
<html lang="zh" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <link rel="icon" href="./favicon.ico"/>
  <title>解决方案</title>
  <link rel="stylesheet" href="./libs/uikit/css/uikit.min.css">
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_938989_wfn8mzlz6t.css">
  <link rel="stylesheet" href="./css/animate.css">
  <link rel="stylesheet" href="css/reset.css"/>
  <link rel="stylesheet" href="css/head.css"/>
  <link rel="stylesheet" href="css/style.css"/>

</head>
<body>
<div id="app">
  <!-- 导航菜单 -->
  <div class="headers">
    <header class="header">
      <div class="clearfix">
        <div class="fl left">
          <a href="javascript:void(0)"><img src="image/logo.png" alt="" class="img1"/></a>
        </div>
        <div class="fr nav">
          <ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
            <li><a href="./index.html">首页</a></li>
            <li class="dropdown">
              <a href="./solution.html" class="active">解决方案 <span class="iconfont icon-bottom"></span></a>
              <div class="dropdown_menu">
                <a href="./solution-shop.html">分销商城</a>
                <a href="./solution-zxj.html">租享家管理</a>
              </div>
            </li>
            <li><a href="./examples.html">应用案例</a></li>
            <li><a href="./orders.html">定制服务</a></li>
            <li><a href="./about.html">关于我们</a></li>
          </ul>
        </div>
        <a href="javascript:void(0)" id="navToggle">
          <span></span>
        </a>
      </div>
    </header>
    <div class="m_nav">
      <div class="top clearfix">
        <img src="image/closed.png" alt="" class="closed"/>
      </div>
      <div class="logo">
        <img src="image/logo2.png" alt=""/>
      </div>
      <ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
        <li><a href="./index.html">首页</a></li>
        <li class="dropdown">
          <a href="javascript:void(0)" class="active">解决方案 <span class="iconfont icon-bottom fr"></span> </a>
          <div class="dropdown_menu">
            <a href="./solution.html">方案预览</a>
            <a href="./solution-shop.html">分销商城</a>
            <a href="./solution-zxj.html">租享家管理</a>
          </div>
        </li>
        <li><a href="./examples.html">应用案例</a></li>
        <li><a href="./orders.html">定制服务</a></li>
        <li><a href="./about.html">关于我们</a></li>
      </ul>
    </div>
  </div>

  <!-- 轮播-数据 -->
  <div class="banner solution-banner">
    <img class="uk-visible@m" src="./image/solution_bg.png" alt="九鸟banner">
    <img class="uk-hidden@m" src="./image/solution_banner_wap.jpg" alt="九鸟banner">
  </div>
  <div class="solution-nums">
    <div class="uk-container">
      <div class="uk-column-1-3 uk-column-divider">
        <div class="nums-item">
          <p class="item-num">2009 <span>年</span></p>
          <p class="item-name">成立时间</p>
        </div>
        <div class="nums-item">
          <p class="item-num">358 <span>个</span></p>
          <p class="item-name">客户</p>
        </div>
        <div class="nums-item">
          <p class="item-num">12 <span>个</span></p>
          <p class="item-name">奖项</p>
        </div>
      </div>
    </div>
  </div>

  <!-- what todo -->
  <div class="todo">
    <div class="uk-container">
      <div class="uk-grid uk-child-width-1-3@m">
        <div class="todo-item" v-for="(item,index) in solutionList" :key="index" @mouseover="solutionOver(index)">
          <div class="item-content" v-bind:class="item.active == 1?'uk-card-default':''">
            <div class="item-container" v-bind:class="item.active == 1?'item-container-active':''">
              <span class="item-ic iconfont" :class="item.icon"></span>
              <p class="item-name">{{item.title}}</p>
              <p class="item-desc">{{item.desc}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--商城-->
  <div class="solution-shop item-padding">
    <div class="uk-container">
      <div class="index-comm-title comm-title-small">
        <p class="title-en">多用户商城系统</p>
        <p class="title-zh">搭建属于你的商城平台</p>
      </div>
      <p class="shop-desc">
        一款带小程序的SAAS微信分销系统，帮助商家快速搭建微商城、招募大量分销商，整合传统分销体系，快速帮助传统企业顺利转型，打造线上+线下相结合的商业模式，旨在帮商家快速卖货，迅速累计客户资源。</p>
      <div class="shop-img"><img src="./image/solution_shop.jpg" alt=""></div>
      <a class="shop-more" href="./solution-shop.html">查看详情 <span class="iconfont icon-jiantou4"></span></a>
    </div>
  </div>

  <!--租享家-->
  <div class="item-padding banner solution-zxj">
    <div class="uk-container">
      <div class="index-comm-title comm-title-small">
        <p class="title-en">租享家管理系统</p>
        <p class="title-zh">ZU XIANG JIA management system</p>
      </div>
      <div class="uk-grid zxj-list uk-child-width-1-3@m">
        <div class="item-container">
          <div class="zxj-item zxj-item-active">
            <span class="item-num">01</span>
            <p class="item-title tr">智能、管理、服务、收益</p>
            <p class="item-desc">
              租享家是秉持着让房东出租更省心，租客租住更安心的愿景。做出了一下服务升级：使用了人脸识别门禁、智能监控............
            </p>
            <p class="xian m-divider"></p><span class="iconfont icon-jiantou4"></span>
          </div>
        </div>
        <div class="zxj-item zxj-item-temp"></div>
        <div class="item-container">
          <div class="zxj-item">
            <span class="item-num hide">02</span>
            <p class="item-title">房屋包租</p>
            <p class="item-desc">

              业主长期将房屋整体打包出租给租享家，租享家每月按约定金额支付房租。我方结合实际情况以及业主意愿，对房屋进............
            </p>
            <p class="hide m-divider"></p><span class="hide iconfont icon-jiantou4"></span>
          </div>
        </div>
      </div>
      <div class="uk-grid uk-child-width-1-3@m zxj-list">
        <div class="item-container">
          <div class="zxj-item">
            <span class="item-num hide">03</span>
            <p class="item-title tr">服务项目</p>
            <p class="item-desc">
              结合房屋SAAS系统及智能硬件实现可视化管理；线上签约，合同管理，账单结算，水电数据，交租，退房，验收，保修............
            </p>
            <p class="hide m-divider"></p><span class="hide iconfont icon-jiantou4"></span>
          </div>
        </div>
        <div class="zxj-item zxj-item-temp"></div>
        <div class="item-container">
          <div class="zxj-item">
            <span class="item-num hide">04</span>
            <p class="item-title">公寓改造运营</p>
            <p class="item-desc">
              针对老旧房屋或者有对出租房屋进行装修升级计划的房东；只需房东提供合适房屋，租享家向您提供项目规划设计............
            </p>
            <p class="hide m-divider"></p><span class="hide iconfont icon-jiantou4"></span>
          </div>
        </div>
      </div>
      <div class="uk-grid uk-child-width-1-3@m zxj-list">
        <div class="zxj-item zxj-item-temp"></div>
        <div class="item-container">
          <div class="zxj-item tc">
            <span class="item-num hide">05</span>
            <p class="item-title">租金授信</p>
            <p class="item-desc">
              针对房屋托管于租享家的房东，提供大额资金授信服务，根据月收租金额，房东一次性预支未来一段时间的房屋租金............
            </p>
            <p class="hide m-divider"></p><span class="hide iconfont icon-jiantou4"></span>
          </div>
        </div>
        <div class="zxj-item zxj-item-temp"></div>
      </div>
      <a class="shop-more" href="./solution-zxj.html">查看详情 <span class="iconfont icon-jiantou4"></span></a>
    </div>
  </div>

  <!--尾部-->
  <div class="footer wow fadeInUp">
    <div class="uk-container">
      <div class="uk-grid">
        <div class="uk-width-1-3@m">
          <h1 class="footer-name">上海九鸟软件有限公司</h1>
          <p class="footer-contact-item"><span class="iconfont icon-weibiaoti-"></span>电话：18862486210</p>
          <p class="footer-contact-item"><span class="iconfont icon-youxiang-"></span>地址：昆山市和丰路108号太平洋商业广场1233室</p>
          <p class="footer-contact-item"><span class="iconfont icon-dizhi"></span>邮箱：105498540@qq.com</p>
        </div>
        <div class="uk-width-2-3@m sub-info">
          <div class="uk-grid uk-child-width-1-3@m">
            <div class="input-item"><input type="text" placeholder="姓名"></div>
            <div class="input-item"><input type="text" placeholder="邮箱"></div>
            <div class="input-item"><input type="text" placeholder="电话"></div>
          </div>
          <div class="sub-desc"><textarea placeholder="内容"></textarea></div>
          <button class="uk-button uk-button-primary btn-sub">提交</button>
        </div>
      </div>
    </div>
  </div>

  <!--底部地图-->
  <div class="footer-map wow fadeInUp">
    <div class="uk-container">
      <a class="map-item" href="index.html">首页 </a>|
      <a class="map-item map-item-active" href="solution.html"> 解决方案 </a>|
      <a class="map-item" href="examples.html"> 应用案例 </a>|
      <a class="map-item" href="orders.html"> 定制服务 </a>|
      <a class="map-item" href="about.html"> 关于我们 </a>
    </div>
    <p class="copy-right">备案号:沪ICP备xxxxx号</p>
  </div>

  <!--返回顶部-->
  <span id="toTop" class="iconfont icon-fanhuidingbu to-top hide"></span>
</div>


<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script src="./libs/wow.min.js"></script>
<script src="./libs/uikit/js/uikit.min.js"></script>
<script src="./js/header.js"></script>
<script src="./datas/solitions.js"></script>
<script>
  $(function () {
    $('.zxj-list .zxj-item').each(function (index) {
      $(this).hover(function () {
        $('.zxj-list .zxj-item').removeClass("zxj-item-active");
        $('.zxj-list .item-num').addClass("hide");
        $(this).addClass("zxj-item-active");
        $(this).find(".item-num").removeClass("hide");

        $('.zxj-list .m-divider').removeClass("xian").addClass('hide');
        $(this).find('.m-divider').removeClass('hide').addClass('xian');

        $('.zxj-list .iconfont').addClass('hide');
        $(this).find('.iconfont').removeClass('hide');
      }, function () {

      });
    });

  })
</script>
</body>
</html>